<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>星光</title>
	<style>
		*{margin:0;padding:0;box-sizing:border-box}
		html,body{
			width: 100%;
			height: 100%;
			background-color: #fff;
		}
		#xingguang{
			width: 100%;
			height: 100%;
			position: relative;
			overflow: hidden;
		}
	</style>
</head>
<body>
	<canvas id='xingguang'></canvas>
</body>
<script src='requestAnimationFrame.js'></script>
<script>
	var canvasDots = function(){
		var canvas = document.querySelector('#xingguang');
		var ctx = canvas.getContext('2d');
		var colorDot = '#ffccff';
		var color = '#ffccff';
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		canvas.style,display = 'block';
		ctx.fillStyle = colorDot;
		ctx.lineWidth = .2;
		ctx.strokeStyle = color;
		var times = null ;
		var dots = {
			nb : 20,
			distance : 100,
			d_radius : 100,
			array : []
		};
		function Dot(){
			this.x = Math.random() * canvas.width;
			this.y = Math.random() * canvas.height;
			this.vx = -.5 + Math.random();
			this.vy = -.5 + Math.random();
			this.radius = Math.random() * 10;
		}
		Dot.prototype = {
			create : function(){
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
				ctx.fill();
			},
			animate : function(){
				for(var i = 0 ; i < dots.nb ; i++){
					var dot = dots.array[i];
					if(dot.y < 0 || dot.y > canvas.height){
						dot.vx = dot.vx;
						dot.vy = -dot.vy;
					}
					else if(dot.x < 0 || dot.x > canvas.width){
						dot.vx = -dot.vx;
						dot.vy = dot.vy;
					}
					dot.x += dot.vx;
					dot.y += dot.vy;
				}
			},
			line : function(){
				for(var i = 0 ; i < dots.nb ; i++){
					for(var j = 0 ; j < dots.nb ; j++){
						var i_dot = dots.array[i];
						var j_dot = dots.array[j];
						ctx.beginPath();
						ctx.moveTo(i_dot.x, i_dot.y);
						ctx.lineTo(j_dot.x, j_dot.y);
						ctx.stroke();
						ctx.closePath();
					}
				}
			}
		};

		function createDots(){
			//刷新整个区域
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			//重绘所有小点
			for(i = 0; i < dots.nb; i++){
				dots.array.push(new Dot());
				//遍历所有的点
				dot = dots.array[i];
				dot.create();
			}
			dot.animate();
			dot.line();
		}

		clearInterval(times);
		//每隔50毫秒刷新一次页面
		times=setInterval(createDots, 30);
	}
	requestAnimationFrame(function(){
		canvasDots();
	});
</script>
</html>